<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      /**
       * var变量提升
       *
       * js预编译时，将var声明的变量提升到 函数作用域最顶部
       */
      console.log(x); // 没有报错，输出 undefined
      var x = 4;

      /**
       * let、const 暂时性死区
       *
       * 只有等到变量赋值成功后才能使用
       */
      // console.log(y, z); 报错 Uncaught ReferenceError: Cannot access 'y' before initialization
      let y = 5;
      let z = 6;

      /**
       * 在es5规定 顶层对象属性和全局变量等价，var和function声明的全局变量也是顶层对象
       * 在es6规定 var,function声明全局变量，依旧是顶层对象的属性；let,const,class声明的全局变量，不属于顶层对象的属性
       */
      var a = 1;
      function fn() {}
      const b = 2;
      let c = 3;
      debugger;
      console.log(a, window.a); // 1 1
      console.log(fn, window.fn); // fn(){} fn(){}
      console.log(b, window.b); // 2 undefined
      console.log(c, window.c); // 3 undefined
    </script>
  </body>
</html>
